<template>
    <div ref="chart" style="width: 100%;height: 100%;">

    </div>
</template>
<script>
import { getDonutChartData } from '../api/DonutChart';

export default {
  data () {
    return {
      myChart: null,
      itemData: []
    }
  },
  mounted () {
    this.getDonutChart();
  },
  computed: {
  },
  methods: {
    initChart () {
      this.myChart = this.$echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: 'item'
        },
        title: {
          text: '产品销量',
          left: 'center',
          top: 'center'
        },
        series: [
          {
            // name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              // normal:{
              formatter: '{b}: {c}', // 这里的格式化字符串就是显示的内容
              show: true,
              position: 'outside'
              // }

            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: this.itemData
          }
        ]
      };
      //   getDonutChartData().then(res=>{
      //     myChart.setOption({  //动画的配置
      //                   series: [{
      //                   data: res  //这里数据是一个数组的形似
      //                   }]

      //               })
      // })
      this.myChart.setOption(option);
      // 当窗口大小改变 echarts重置大小
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
    getDonutChart () {
      getDonutChartData().then(res => {
        this.itemData = res;
        this.initChart();
      })
    }
  }
}
</script>
<style  scoped>

</style>
